/* eslint-disable react-hooks/rules-of-hooks */
import React, { useRef, useState } from 'react'
import { Tabs, Swiper } from 'antd-mobile'
import styles from './css/home.module.css'
import { type SwiperRef } from 'antd-mobile/es/components/swiper'
function index() {
    const tabItems = [
        { key: 'fruits', title: '热点' },
        { key: 'vegetables', title: '专家科普' },

        { key: 'hot', title: '生活' },
        { key: 'mu', title: '母婴' },
        { key: 'py', title: '辟谣' },

    ]
    const swiperRef = useRef<SwiperRef>(null)
    const [activeIndex, setActiveIndex] = useState(2)
    const [list,setList]=useState([
        {
            img:'',
            title:'超实用,用手过多会导致。。。。。。。。。。',
            time:'生活 2月19日',
            key:'1'
        },
        {
            img:'',
            title:'超实用,用手过多会导致。。。。。。。。。。',
            time:'生活 2月19日',
            key:'2'
        },
        {
            img:'',
            title:'超实用,用手过多会导致。。。。。。。。。。',
            time:'生活 2月19日',
            key:'3'
        },
        {
            img:'',
            title:'超实用,用手过多会导致。。。。。。。。。。',
            time:'生活 2月19日',
            key:'4'
        },
        {
            img:'',
            title:'超实用,用手过多会导致。。。。。。。。。。',
            time:'生活 2月19日',
            key:'5'
        },
        {
            img:'',
            title:'超实用,用手过多会导致。。。。。。。。。。',
            time:'生活 2月19日',
            key:'6'
        },
        {
            img:'',
            title:'超实用,用手过多会导致。。。。。。。。。。',
            time:'生活 2月19日',
            key:'7'
        }
    ])
    return (
        <div>
            <Tabs
                activeKey={tabItems[activeIndex].key}
                onChange={key => {
                    const index = tabItems.findIndex(item => item.key === key)
                    setActiveIndex(index)
                    swiperRef.current?.swipeTo(index)
                }}
            >
                {tabItems.map(item => (
                    <Tabs.Tab title={item.title} key={item.key} />
                ))}
            </Tabs>
            <Swiper
                direction='horizontal'
                loop
                indicator={() => null}
                ref={swiperRef}
                defaultIndex={activeIndex}
                onIndexChange={index => {
                    setActiveIndex(index)
                }}
            >
                <Swiper.Item>
                    <div className={styles.content}>热点</div>
                </Swiper.Item>
                <Swiper.Item>
                    <div className={styles.content}>专家科普</div>
                </Swiper.Item>
                <Swiper.Item>
                    <div className={styles.content}>
                        {
                            list.map((item,i)=>{
                                return <div key={i} className={styles.item}>{item.title}</div>
                            })
                        }
                    </div>
                </Swiper.Item>
                <Swiper.Item>
                    <div className={styles.content}>母婴</div>
                </Swiper.Item>
                <Swiper.Item>
                    <div className={styles.content}>辟谣</div>
                </Swiper.Item>
            </Swiper>
        </div>
    )
}

export default index
